<template>
  <!-- 图片/icon+文字 -->
  <div :class="'img_text ' + className" :style="imgTextStyle" @click="boxEvent">
    <img
      v-if="emptyShowImg || bindConfig.modelValue"
      :src="rowSrc ? row[rowSrc] : src"
      :style="imgStyle"
      @click="imgEvent"
    />
    <i v-if="fontClass" :class="fontClass" />
    <text-base v-bind="bindConfig"></text-base>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import TextBase from './TextBase.vue';

const attrs = useAttrs();
const emits = defineEmits(['itemEvent']);

const props = defineProps({
  emptyShowImg: {
    // 值为空的时候是否展示img图标
    type: Boolean,
    default: false,
  },
  imgStyle: {
    // 图片样式
    type: String,
    default: '',
  },
  imgTextStyle: {
    // 图片+文字 box样式
    type: String,
    default: '',
  },
  className: {
    // class
    type: String,
    default: '',
  },
  src: {
    // 图片地址
    type: String,
    default: '',
  },
  rowSrc: {
    // 从接口中取图片的字段
    type: String,
    default: '',
  },
  imgBtnFlag: {
    // 是否只有点击图片才会触发事件
    type: Boolean,
    default: false,
  },
  row: {
    // form数据,或者table的行数据
    type: Object,
    default: () => ({}),
  },
  prop: {
    type: String,
    default: '',
  },
  fontClass: {
    type: String,
    default: '',
  },
});

const bindConfig = computed(() => {
  return { ...attrs, row: props.row };
});

function boxEvent() {
  if (props.imgBtnFlag) return;
  itemEvent();
}
function imgEvent() {
  if (props.imgBtnFlag) itemEvent();
}

function itemEvent() {
  emits('itemEvent', {
    row: props.row,
    prop: props.prop,
  });
}
</script>
<style lang="scss" scoped>
.img_text {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
  img {
    margin-right: 5px;
  }
  > span {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
  }
}
</style>
